Let's say I have a package called dog, and it exports some functions defined in index.js. The index.js file is kept inside of a src directory. Here's what the tree looks like:
--> dog
--> src
--> index.js
Importing a function from the dog package would look like this: import { eat } from '@dog'
Now I would like to create a "sub-package" (called puppy) of the dog package. I want the import to look like this:
import { whimper } from '@dog/puppy'`
I'm wondering how to structure the dog package so that I can import the puppy package in the manner shown above. I've tried a couple different ways without much success. Here are some examples of what I tried:
Attempt 1:
--> dog
--> puppy
--> index.js
--> src
--> index.js
Attempt 2:
--> dog
--> src
--> puppy
--> index.js
--> index.js
These result in an error about being unable to resolve @dog/puppy when trying to import functions from the module.
Just FYI, I'm not all that familiar with creating packages. I don't even understand how import { eat } from @dog works without specifying the full path to eat (dog/src/index.js).
I believe I have found a solution to my question.
I can actually utilize the "Attempt 1" directory structure above:
--> dog
--> puppy
--> index.js
--> src
--> index.js
The part I was missing was changing the command I was using to run the dog module locally. I'm using chokidar and yalc to watch/publish changes made to the dog module, and I needed to tweak the command to include changes made within the puppy directory. Prior to this, I think the puppy code was essentially being ignored, and thus not being published by yalc. So the code that wanted to import the puppy functions was not able to find it.